<template>
    <div id="threeworld">
    </div>
</template>

<script>
    // import * as THREE from 'three';
    // import {TrackballControls} from 'three/examples/jsm/controls/TrackballControls';
    // import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
    // import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
    export default {
        name: "ThreeLoader",
        data(){
            return{
                camera: null,
                scene:null,
                renderer: null,
                controls: null,
                mixer: null
            }
        },
        mounted() {
            this.init();
            this.render();
        },
        methods:{
            init(){
                let container = document.getElementById("threeworld");
                // 设置相机
                this.camera = new THREE.PerspectiveCamera(
                    70,
                    container.clientWidth / container.clientHeight,
                    0.1,
                    10
                );
                this.camera.position.z = 2;
                this.scene = new THREE.Scene();
                let self = this;


                /**
                 * 相机设置
                 */
                var width = window.innerWidth; //窗口宽度
                var height = window.innerHeight; //窗口高度
                var k = width / height; //窗口宽高比
                var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大

                this.renderer = new THREE.WebGLRenderer({ antialias: true });
                this.renderer.setSize(container.clientWidth, container.clientHeight);
                container.appendChild(this.renderer.domElement);
                // this.controls = new OrbitControls(this.camera, this.renderer.domElement);
                this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);





                // 加载模型
                // var loader = new GLTFLoader().setPath("/static/dalou/");
                // loader.load("CesiumMan.gltf", function(gltf) {
                    // var mesh = gltf.scene.children[0];
                    // mesh.scale.set(10, 10, 10);
                    // self.scene.add(mesh); // 将模型引入three
                    // console.log(gltf, "gltf");

                    // 调用动画
                    // self.mixer = new THREE.AnimationMixer(mesh);
                    // var action = self.mixer.clipAction(gltf.animations[0]);
                    // action
                    //     .stop()
                    //     .setDuration(4)
                    //     .play();
                // });
                // this.scene.add(loader);

                // var loader = new THREE.GLTFLoader();
                var loader = new THREE.GLTFLoader();
                // var loader = new GLTFLoader();
                loader.load('/static/dalou/Duck.gltf',  (result) => {
                    // correctly position the scene
                    result.scene.scale.set(6, 6, 6);
                    result.scene.translateY(-3);
                    result.scene.rotateY(-0.3*Math.PI)
                    self.scene.add(result.scene)
                    var mesh = result.scene.children[0];
                    self.mixer = new THREE.AnimationMixer(mesh);
                    // var action = self.mixer.clipAction(result.animations[0]);
                    // action
                    //     .stop()
                    //     .setDuration(4)
                    //     .play();
                    console.log(result, "GLTFLoader");
                });

                let textureLoader1 = new THREE.TextureLoader();
                // textureLoader1.load('/static/textures/wall/wall.jpg',
                //     onLoadFunction, onProgressFunction, onErrorFunction);

                let tt = textureLoader1.load('/static/textures/wall/wall.jpg');
                let cubeMaterial = new THREE.MeshStandardMaterial({
                    map:tt
                });
                let mt = new THREE.MeshBasicMaterial({color:0xffff00});
                console.log(cubeMaterial, 3334444);
                let cubeGeo = new THREE.BoxGeometry(10, 1, 1);
                let cube1 = new THREE.Mesh(cubeGeo, cubeMaterial);
                cube1.position.set(0, 0, 0);
                cube1.scale.set(2, 2, 2);
                self.scene.add(cube1);



                function onLoadFunction(obj){
                    console.log("onLoadFunction");

                    let cubeMaterial = new THREE.MeshStandardMaterial({
                        map:obj
                    });
                    let mt = new THREE.MeshBasicMaterial({color:0xffff00});
                    console.log(cubeMaterial, 3334444);
                    let cubeGeo = new THREE.BoxGeometry(10, 1, 1);
                    let cube1 = new THREE.Mesh(cubeGeo, cubeMaterial);
                    cube1.position.set(0, 0, 0);
                    cube1.scale.set(2, 2, 2);




                    self.scene.add(cube1);
                }

                function onProgressFunction(){
                    console.log("onProgressFunction");
                }

                function onErrorFunction(error){
                    console.log("onErrorFunction");
                }

                /*
                 添加光源
               */
                //点光源
                var point = new THREE.PointLight(0xffffff);
                point.position.set(400, 200, 300); //点光源位置
                this.scene.add(point); //点光源添加到场景中
                //环境光
                var ambient = new THREE.AmbientLight(0x999999);
                this.scene.add(ambient);

            },
            render() {
                requestAnimationFrame(this.render);
                this.renderer.render(this.scene, this.camera); //执行渲染操作
                // var time = this.clock.getDelta();
                // if (this.mixer) {
                //     this.mixer.update(time);
                // }
            }
        }
    }
</script>

<style scoped>
    #threeworld{
        height: 80%;
        width: 100%;
        border: 3px solid #2c3e50;
    }
</style>
